import React, {Component} from 'react';
import {View, Text, StyleSheet, Image, TouchableOpacity} from 'react-native';
import PropTypes from 'prop-types';
import {LinearBoardButton, LinearButton} from '../../../components/Button';

const styles = StyleSheet.create({
  container: {
    height: 100,
    paddingLeft: 20,
    paddingRight: 20,
    paddingBottom: 0,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
  },
  descrptionText: {
    color: 'black',
    textAlign: 'left',
  },
  buyButoon: {
    borderColor: 'rgba(66,66,66,1)',
    backgroundColor: '#FFCB26',
    width: 60,
    height: 30,
    justifyContent: 'center',
    alignItems: 'center',
    marginBottom: 20,
    marginRight: 10,
    fontSize: 12,
  },
});

export default class PriceCell extends Component {
  static propTypes = {
    price: PropTypes.object,
    onPressAccept: PropTypes.func,
    onPressReject: PropTypes.func,
  };

  render() {
    let {
      value,
      user,
      userImg,
      payCoin,
      showAcceptButton,
      showRejectButton,
    } = this.props.price;
    // console.log(userImg);
    return (
      <View style={styles.container}>
        <Image
          source={{uri: userImg}}
          style={{
            width: 66,
            height: 66,
            borderRadius: 33,
            backgroundColor: 'lightGray',
            marginRight: 20,
            backgroundColor: 'rgba(220,220,220,1)',
          }}></Image>
        <View
          style={{
            flex: 1,
            height: '100%',
            flexDirection: 'column',
            justifyContent: 'center',
          }}>
          <Text style={{color: '#7204F4'}}>{user}</Text>
          <View
            style={{
              flexDirection: 'row',
              marginLeft: 0,
              alignItems: 'flex-end',
            }}>
            <Text
              style={{
                color: '#7204F4',
                fontSize: 25,
                fontWeight: 'bold',
              }}>
              {value}
            </Text>
            <Text
              style={{
                color: '#7204F4',
                fontSize: 12,
                marginBottom: 4,
                marginLeft: 0,
              }}>
              {payCoin}
            </Text>
          </View>
          {/* <Text
            style={{
              color: '#A4A4A4',
              fontSize: 13,
            }}>
            {`($${value})`}
          </Text> */}
        </View>
        {showAcceptButton ? (
          <LinearButton
            buttonStyle={styles.buyButoon}
            textStyle={{fontSize: 14}}
            onPress={this.props.onPressAccept}
            text={'Accept'}></LinearButton>
        ) : null}
        {showRejectButton ? (
          <LinearBoardButton
            buttonStyle={styles.buyButoon}
            textStyle={{fontSize: 14}}
            onPress={this.props.onPressReject}
            text={'Reject'}></LinearBoardButton>
        ) : null}
      </View>
    );
  }
}
